import React from 'react';
import {
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Legend,
} from 'bizcharts';
import DataSet from '@antv/data-set';

// CDN START

class Withline extends React.Component {
  render() {
    const { DataView } = DataSet;
    const data = [
      {
        item: '前端技术',
        a: 80,
        b: 60,
      },
      {
        item: '后端技术',
        a: 90,
        b: 60,
      },
      {
        item: '工作态度',
        a: 75,
        b: 60,
      },
      {
        item: '工作效率',
        a: 78,
        b: 60,
      },      
      {
        item: '抽象思维',
        a: 80,
        b: 50,
      },
      {
        item: '形象思维',
        a: 20,
        b: 50,
      },
      {
        item: '心理素质',
        a: 65,
        b: 60,
      },
      {
        item: '身体素质',
        a: 90,
        b: 60,
      },
      {
        item: '领导力',
        a: 60,
        b: 50,
      },
      {
        item: '抗压力',
        a: 70,
        b: 60,
      },
    ];
    const dv = new DataView().source(data);
    dv.transform({
      type: 'fold',
      fields: ['a', 'b'],
      // 展开字段集
      key: 'user',
      // key字段
      value: 'score', // value字段
    });
    const cols = {
      score: {
        min: 0,
        max: 80,
      },
      user: { formatter: val => ({ a: '当前用户', b: '平均线' }[val]) },
    };
    return (
      <div>
        <Chart
          data={dv}
          padding={[20, 20, 95, 20]}
          scale={cols}
          forceFit
          height={500}
        >
          <Coord type="polar" radius={0.8} />
          <Axis
            name="item"
            line={null}
            tickLine={null}
            grid={{
              lineStyle: {
                lineDash: null,
              },
              hideFirstLine: false,
            }}
          />
          <Tooltip />
          <Axis
            name="score"
            line={null}
            tickLine={null}
            grid={{
              type: 'polygon',
              lineStyle: {
                lineDash: null,
              },
              alternateColor: 'rgba(0, 0, 0, 0.04)',
            }}
          />
          <Legend name="user" marker="circle" offset={30} />
          <Geom type="line" position="item*score" color="user" size={2} />
          <Geom
            type="point"
            position="item*score"
            color="user"
            shape="circle"
            size={4}
            style={{
              stroke: '#fff',
              lineWidth: 1,
              fillOpacity: 1,
            }}
          />
        </Chart>
      </div>
    );
  }
}

export default Withline
